<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css"
    />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .map {
        height: 100%px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var center = ol.proj.transform([104.05, 30.58], "EPSG:4326", "EPSG:3857");
      var map = new ol.Map({
        view: new ol.View({
          center: center,
          zoom: 9,
          minZoom: 9,
          maxZoom: 9,
        }),
        target: "map",
      });
      var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({ url: "./sichuan/{z}/{y}/{x}/tile.png" }),
      });
      map.addLayer(offlineMapLayer);
    </script>
  </body>
</html>
